<script setup lang="ts">
import type { Data } from '@/types/MyLook'
//接收到的参数
const props = defineProps({
  data: {
    type: Array as () => Data[],
  },
})
let data = props.data

// 计算时间
let datas = data?.map((item) => {
  let now = new Date().getTime()
  let itemTime = new Date(item.time?.toString()).getTime()
  let diff = now - itemTime

  let days = Math.floor(diff / (24 * 60 * 60 * 1000)) // 计算天数
  let hours = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)) // 计算剩余的小时
  let minutes = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000)) // 计算剩余的分钟

  if (days > 0) {
    item.time = days + '天前'
  } else if (hours > 0) {
    item.time = hours + '小时前'
  } else {
    item.time = minutes + '分钟前'
  }
  return item
})
// 跳转到用户详情详情
const jump = (id: string) => {
  uni.navigateTo({
    url: `/pages/search/particulars/index?id=${id}`,
  })
}
</script>

<template>
  <scroll-view scroll-y class="scrollView">
    <view class="item" v-for="item in datas" :key="item.id" @click="jump(item.id)">
      <view class="itemImg">
        <image :src="['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(items => item.avatar.endsWith(items)) ? item.avatar : '/static/tabs/user_default.png'" mode="scaleToFill" v-if="item.avatar" class="avatar" />
        <image src="@/static/My/avatar.png" mode="scaleToFill" v-else class="avatar" />
      </view>
      <view class="itemContent">
        <view class="contentName">
          <image
            src="@/static/My/man.png"
            mode="scaleToFill"
            class="sex"
            v-if="item.gender === '男'"
          />
          <image
            src="@/static/My/women.png"
            mode="scaleToFill"
            class="sex"
            v-if="item.gender === '女'"
          />
          {{ item.nickname }}
        </view>
        <view class="contentInfo">{{ `${item.age}岁/ ${item.height}cm / ${item.my_city}` }}</view>
      </view>
      <view class="itemTime"> {{ item.time }} </view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.scrollView {
  width: 100%;
  padding: 2%;
  box-sizing: border-box;

  .item {
    width: 95%;
    height: 80rpx;
    margin: 0 auto;
    margin-bottom: 2%;
    display: flex;
    padding: 0 0 3% 0;
    box-sizing: border-box;
    justify-content: space-between;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 20rpx;
    }

    .itemContent {
      width: 60%;

      .contentName {
        font-size: 32rpx;
        font-weight: 500;

        .sex {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .contentInfo {
        font-size: 24rpx;
        color: #999;
        margin: 4rpx 0px;
      }
    }

    .itemTime {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
